<template>
  <div>
    <el-row class="flex-center m-b-10 m-t-10">
      <el-col :span="12">
        <el-input
          size="small"
          clearable
          style="width: 400px"
          v-model="search.sharerName"
          class="m-r-10"
          placeholder="请输入分润方名称"
          @change="query"
        />
      </el-col>
      <el-col :span="12" class="flex-end">
        <!--      filling-profit-machine:add-->
        <el-button size="small" type="primary" plain @click="addNew"
          >新增分润关系</el-button
        >
      </el-col>
    </el-row>
    <!--  table  -->
    <el-table
      class="my-table"
      :data="data"
      v-loading="loading"
      style="width: 100%; height: calc(100vh - 280px)"
      border
    >
      <el-table-column type="index" align="center" label="序号" width="60" />
      <el-table-column label="分润方名称" min-width="200" align="center">
        <template v-slot="scope">{{
          scope.row.sharerName | defaultValue
        }}</template>
      </el-table-column>
      <el-table-column label="加注机编号" min-width="180" align="center">
        <template v-slot="scope">{{
          scope.row.macCode | defaultValue
        }}</template>
      </el-table-column>
      <el-table-column label="分润规则" width="450" align="center">
        <template v-slot="scope">
          <div>{{ scope.row.shareRate | defaultValue }} 元/吨</div>
          <div>
            <div v-if="scope.row.isCustomer == 0">
              普通客户非在线支付（余额支付、加注卡支付）不参与分账
            </div>
            <div v-if="scope.row.isCustomer == 1">
              普通客户非在线支付（余额支付、加注卡支付）参与分账
            </div>
            <div v-if="scope.row.isTeam == 0">团队客户加注不参与分账</div>
            <div v-if="scope.row.isTeam == 1">
              团队客户加注参与分账{{ scope.row.teamShareRate | defaultValue }}
              元/吨
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="250">
        <template v-slot="scope">
          <!--            filling-profit-machine:settings-->
          <el-button
            @click="editRow(scope.row)"
            type="text"
            size="small"
            icon="el-icon-edit"
            >分润设置
          </el-button>
          <!--          filling-profit-machine:cancel-->
          <el-button
            @click="deleteRow(scope.row)"
            type="text"
            size="small"
            :loading="removeLoading"
            icon="el-icon-delete"
            >解除分润关系
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <app-pagination
      ref="paginationRef"
      :total="total"
      class="m-t-20"
      @change="query"
    />

    <el-dialog
      title="新增分润关系"
      append-to-body
      :visible.sync="showAddNewFlag"
      width="600px"
    >
      <div class="flex-left">
        <div class="flex-start">
          <span style="width: 100px; text-align: right" class="m-r-20"
            >分润方</span
          >
          <select-filling-profit-sharer-button
            dict-code="role_type_sub02"
            :init-value="formInitValue.sharer"
            class="w-100"
            size="large"
            @change="profitSharerChange"
          />
        </div>
        <div class="flex-start m-t-20">
          <span style="width: 100px; text-align: right" class="m-r-20"
            >加注机编号</span
          >
          <select-filling-machine-single-button
            :init-value="formInitValue.machine"
            class="w-100"
            size="large"
            @change="machineChange"
          />
        </div>
        <div class="flex-start m-t-20">
          <span style="width: 100px; text-align: right" class="m-r-20"
            >分润规则</span
          >
          <el-input-number :min="0" v-model="form.shareRate" class="w-100" />
          (元/吨)
        </div>
        <div class="flex-start m-t-20">
          <span style="width: 100px; text-align: right" class="m-r-20"></span>
          <div class="w-100">
            <el-checkbox @change="settingIscustomer" :checked="form.isCustomer">
              散客非在线支付（余额支付 加注卡支付）参与分账
            </el-checkbox>
            <el-checkbox @change="settingIsTeam" :checked="form.isTeam">
              团队客户加注参与分账
            </el-checkbox>
          </div>
        </div>
        <div class="flex-start m-t-20">
          <span style="width: 100px; text-align: right" class="m-r-20"
            >团队客户<br />分润规则</span
          >
          <el-input-number :min="0" v-model="form.teamShareRate" /> (元/吨)
        </div>
      </div>
      <div class="dividing-line m-t-10 m-b-10"></div>
      <div class="flex-end">
        <el-button size="small" @click="showAddNewFlag = false">取消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="doConfirm"
          :loading="submitLoading"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import {
  confirmWarning,
  getRecords,
  getTotal,
  isNull,
  isStringEmpty,
  msgError,
  msgSuccess,
} from "@/util/common-util";
import AppDictSelect from "@/components/business/app-dict-select";
import {
  getPage,
  remove,
  submit,
} from "@/api/business/filling-profit-machine-rule";
import SelectFillingProfitSharerButton from "@/components/business/select-filling-profit-sharer-button";
import SelectFillingMachineSingleButton from "@/components/business/select-filling-machine-single-button";
import DictValueDisplay from "@/components/business/dict-value-display";
import AuthWrapper from "@/components/business/auth-wrapper";

export default {
  name: "filling-profit-machine-rule-list",
  components: {
    AuthWrapper,
    DictValueDisplay,
    SelectFillingMachineSingleButton,
    SelectFillingProfitSharerButton,
    AppDictSelect,
    AppPagination,
  },
  data() {
    return {
      showSearchFlag: true,
      showAddNewFlag: false,
      data: [],
      loading: false,
      removeLoading: false,
      submitLoading: false,
      search: {
        roleType: "",
        sharerName: "",
      },
      total: 0,
      form: {
        shareRate: 0,
        sharerId: "",
        machineId: "",
      },
      formInitValue: {
        machine: {
          id: "",
          macCode: "",
        },
        sharer: {
          id: "",
          sharerName: "",
        },
      },
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    settingIscustomer(e) {
      console.log(e);
      this.form.isCustomer = e ? 1 : 0;
      console.log(this.form);
    },
    settingIsTeam(e) {
      console.log(e);
      this.form.isTeam = e ? 1 : 0;
      console.log(this.form);
    },
    addNew() {
      this.form = { shareRate: 0, sharerId: "", machineId: "" };
      this.showAddNewFlag = true;
    },
    query(_page) {
      if (isNull(_page)) {
        _page = this.$refs.paginationRef.getPage();
      }
      this.loading = true;
      console.log("_page__");
      console.log(_page);
      getPage(_page, this.search)
        .then((res) => {
          this.data = getRecords(res);
          this.total = getTotal(res);
          this.loading = false;
        })
        .then(() => {
          this.loading = false;
        });
    },
    deleteRow(row) {
      confirmWarning(
        "解除分润关系",
        `确定解除分润方 ${row.sharerName} ？`,
        () => {
          this.removeLoading = true;
          remove(row.id)
            .then((res) => {
              this.removeLoading = false;
              msgSuccess();
              this.query();
            })
            .catch(() => {
              this.removeLoading = false;
            });
        }
      );
    },
    profitSharerChange(v) {
      this.form.sharerId = v.id;
    },
    machineChange(v) {
      this.form.machineId = v.id;
    },
    editRow(_row) {
      this.form.sharerId = _row.sharerId;
      this.form.machineId = _row.machineId;
      this.form.shareRate = _row.shareRate;
      this.form.id = _row.id;
      this.formInitValue.machine.id = _row.machineId;
      this.formInitValue.machine.macCode = _row.macCode;
      this.formInitValue.sharer.id = _row.sharerId;
      this.formInitValue.sharer.sharerName = _row.sharerName;
      this.showAddNewFlag = true;
    },
    doConfirm() {
      if (isStringEmpty(this.form.sharerId))
        return msgError("请选择一个分润方");
      if (isStringEmpty(this.form.machineId))
        return msgError("请选择一个加注机");
      this.submitLoading = true;
      submit(this.form)
        .then((res) => {
          this.query();
          this.submitLoading = false;
          this.showAddNewFlag = false;
          this.form.id = null;
          this.formInitValue = { machine: {}, sharer: {} };
          msgSuccess();
        })
        .catch(() => {
          this.submitLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>
